import axios from "axios";
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";

import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";

// 接口统一配置：四个，接口基地址，接口请求超时时间，请求拦截器，响应拦截器
// 创建axios实例,实例名称为   http   默认导出名为  http
const http = axios.create({
  // 1.接口基地址
  baseURL: "http://pcapi-xiaotuxian-front-devtest.itheima.net",
  // 2.接口请求超时时间
  timeout: 5000,
});

// 3.axios请求拦截器
// 因为很多请求需要携带token，因此就在请求拦截器的header中携带上即可
// Bearer ${token}  中间一定要有个空格
http.interceptors.request.use(
  (config) => {
    // 执行拿到stores中的用户实例
    const useStore = useUserStore();
    const token = useStore.userInfo.token;
    if (token) {
      // 固定模式，按照后端给的格式配置的
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (e) => Promise.reject(e)
);

// 4.axios响应式拦截器，这里会做很多事情，在返回的结果里根据状态码，来弹出不同的提示信息
http.interceptors.response.use(
  (res) => res.data,
  (e) => {
    const useStore = useUserStore();
    const router = useRouter();
    // 统一错误提示
    ElMessage({
      type: "warning",
      message: e.response.data.message,
    });
    // 401  token失效处理
    // 1. 清除本地token
    // 2. 跳转回登录页
    if (e.response.status === 401) {
      useStore.clearUserInfo();
      router.push("/login");
    }
    return Promise.reject(e);
  }
);

// 这里接口导出的就是http，这里是默认导出，所以在接收时叫什么名字都可以
export default http;

// 问题，如果项目不同业务模块需要的基地址不同，那么就用axios.create执行多次得到不同的实例对象，然后，在对应的api页面引入时，按需引入两个不同的实例对象  也就是通过  { }  引入
// 而且这里也不再使用默认导出，而是使用按需导出两个不同的路由实例对象供组件使用；
